<template>
	<view class="dish-card">
		<uni-swipe-action>
			<uni-swipe-action-item
				:disabled="!swipe"
				:threshold="0"
				:right-options="options"
				@click="bindClick"
			>
				<view class="dish-card-warpper bg-default">
					<!-- 左侧图片 -->
					<image class="dish-image" :src="BASE_URL + data.thumbnail" mode="aspectFill" />
					<!-- 右侧 -->
					<view class="right">
						<slot></slot>

						<view class="dish-name">{{ data.name }}</view>
						<view class="dish-type">
							<text>{{ data.categoryName }}</text>
							<view v-if="data.wishesCount">
								<text class="dishes-type-wish">{{ data.wishesCount }}人</text>
								<text>想吃</text>
							</view>
						</view>
						<view class="dish-score">
							<uni-rate :value="data.avgRating" :size="18" allowHalf readonly />
							<view class="dish-score-rating">{{ data.avgRating }}</view>
							<view class="dish-score-count">{{ data.ratingCount }}次</view>
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script setup>
import { ref, toRaw } from 'vue';
import { BASE_URL } from '../../config/config.js';

const $emits = defineEmits(['delete', 'edit']);

const $props = defineProps({
	data: { type: Object, default: () => ({}) },

	image: {
		type: String,
		default: '../../static/icons/no-image.svg',
	},
	// 可滑动编辑
	swipe: {
		type: Boolean,
		default: true,
	},
	// 显示删除
	swipeDelete: {
		type: Boolean,
		default: false,
	},
});

const options = ref([
	{
		text: '删除',
		style: {
			backgroundColor: '#F56C6C',
		},
	},
	{
		text: '修改',
		style: {
			backgroundColor: '#007aff',
		},
	},
]);

const bindClick = ({ index }) => {
	if (index === 0) {
		console.log('删除', index);
		$emits('delete', toRaw($props.data));
	} else {
		console.log('修改', index);
		$emits('edit', toRaw($props.data));
	}
};
</script>

<style scoped>
.dish-card {
	padding: 0 12rpx 12rpx 12rpx;
}

.dish-card-warpper {
	display: flex;
	background-color: #f8f8f8;
}

.dish-image {
	width: 180rpx;
	height: 180rpx;
}

.right {
	position: relative;
	flex: 1;
	padding: 16rpx 16px 0 24rpx;
}

.dish-name {
	color: #000;
}

.dish-type {
	margin-top: 12rpx;
	color: #6d6d6d;
	display: flex;
}

.dishes-type-wish {
	margin-left: 8px;
	color: #ec5b7d;
}

.dish-score {
	margin-top: 16rpx;
	display: flex;
	align-items: center;
}

.dish-score-rating {
	color: #fac909;
	font-weight: bold;
	width: 66rpx;
	margin-left: 16rpx;
}

.dish-score-count {
	color: #363636;
}
</style>
